<template>
	<div ref="cardRef" v-bind="options" class="house-card">
		<div class="house-card-status" :style="{background: color}">
			<template v-for="device in devices" :key="device.type">
				<a-tooltip placement="left" destroy-tooltip-on-hide @click.stop>
					<template #title>
						<template v-if="device.bind">
							{{ device.label }}{{ device.online === 1 ? `在线` : '已离线' }}
							<template v-if="device.battery !== null">电量{{ device.battery }}%</template>
						</template>
						<template v-else>未绑定{{ device.label }}</template>
					</template>
					<template v-if="device.bind">
						<svg-icon
							@click.stop="device.handler(device)"
							:icon-class="`device-${device.icon}-${device.online === 1 ? 'online' : 'offline'}`" />
					</template>
					<template v-else>
						<svg-icon :icon-class="`device-${device.icon}-online`" style="opacity: 0.4" />
					</template>
				</a-tooltip>
			</template>
		</div>
		<div v-if="!loading" class="house-card-body">
			<div class="house-card-body-title-box">
				<span v-color="{background: color}" class="house-title-tag">
					{{ house.doorplate }}
					<template v-if="house.houseType === 2">- {{ house.roomName }}</template>
				</span>
				<div style="display: flex">
					<!-- 有合同id && 有预定id -->
					<div v-if="house.isBreakNotCalc" class="dirty owe">结</div>
					<div v-if="contract.transitionType === 1" class="dirty to">续</div>
					<div v-if="contract.contractId && book.houseBookId" class="dirty to">定</div>
					<div v-if="house.isDirty" class="dirty">脏</div>
					<div v-if="house.billingLabel === 2" class="dirty owe" @click.stop="options.ondblclick((detailActive = 'finance'))">
						欠
					</div>
					<div v-if="house.contractLabel === 4" class="dirty">搬</div>
				</div>
			</div>
			<div>
				朝{{ orientationMap[house.orientation] || '向未知' }} - {{ house.houseArea }}㎡
				<template v-if="[1, 2].includes(house.houseType)">{{ house.currentFloor }}层/共{{ house.totalFloor }}层</template>
			</div>
			<template v-if="house.houseStatus === 20">
				<!-- 预定 -->
				<div>{{ book.name || '未知' }} {{ book.phone || '未知' }}</div>
				<div>定金 {{ book.money || book.price }}元</div>
				<div>最晚签约日期 {{ formatDate(book.signDate) }}</div>
			</template>
			<template v-else-if="house.houseStatus === 30">
				<!-- 签约 -->
				<div v-if="contract.enterContractId">{{ contract.enterPriseName }}</div>
				<div v-else>{{ contract.renterName || '未知' }} {{ contract.renterPhone || '未知' }}</div>
				<div>
					{{ contract.price }}元/{{contract.contractRentType === 2? "日":"月"}} 押{{ contract.depositMonth }}付{{
						contract.periodMonth === 99 ? '一次性付' : contract.periodMonth
					}}
				</div>
				<div>{{ formatDate(contract.beginTime) }}至{{ formatDate(contract.endTime) }}</div>
			</template>
			<template v-else>
				<div v-if="[1, 2].includes(house.houseType)">可住人数：{{ house.userlimit }}人</div>
				<div v-else>{{ house.roomTypeName }}</div>
				<div>
					<template v-if="house.basePrice">{{ house.basePrice }} -</template>
					{{ house.actualPrice }}元/月
				</div>
				<div>
					空置
					<span v-color="{color: 'danger'}">{{ house.vacantDayCount || 0 }}</span>
					天
				</div>
			</template>
		</div>
	</div>
	<house-detail-dialog
		v-if="value.id"
		v-model:visible="visibles.detail"
		:value="house"
		:active="detailActive"
		@close="emitter.emit('refreshHouse', value.communityId)" />
</template>

<script lang="ts" setup>
	import {computed, reactive, ref, toRef} from 'vue'
	import {defaultHouse, HOUSE_COLOR_MAP, HouseBase, orientationMap} from '@/interface/house'
	import {formatDate} from 'yuxin-base/src/utils/date'
	import {deviceMap} from '@/constant/device'
	import HouseDetailDialog from '@/components/house/detail/house-detail-dialog.vue'
	import emitter from 'yuxin-base/src/utils/bus'

	const props = withDefaults(
		defineProps<{
			value?: HouseBase | any
			loading?: boolean
		}>(),
		{
			value: {}
		}
	)

	const visibles = reactive({
		detail: false
	})

	const cardRef = ref<HTMLDivElement>()
	const detailActive = ref<string>()
	const house = toRef(props, 'value', defaultHouse())
	const book = toRef(house.value, 'houseBook')
	const contract = toRef(house.value, 'renterContract')

	const color = computed(() => HOUSE_COLOR_MAP[house.value.houseStatus || 11])

	const emits = defineEmits(['click'])

	let timer
	const onClick = (e: Event) => {
		if (timer) {
			timer = null
			clearTimeout(timer)
		} else {
			timer = setTimeout(() => {
				timer = null
				emits('click', cardRef.value)
			}, 200)
		}
	}

	const options = reactive({
		class: {
			loading: toRef(props, 'loading')
		},
		onClick,
		ondblclick() {
			visibles.detail = true
		}
	})

	const devices = computed(() => {
		const map = deviceMap()

		if (house.value.deviceInfos) {
			for (let deviceInfo of house.value.deviceInfos) {
				const device = map[deviceInfo.deviceType]

				if (device) {
					device.bind = true
					device.id = deviceInfo.deviceId
					device.battery = deviceInfo.battery
					device.online = deviceInfo.online
					device.roomId = house.value.id as string
					// 如果是水表需要把冷中热水的id并在一起来对应详情的参数 这样才能请求出关联的多个热水表
					device.deviceIds = house.value.deviceInfos
				}
			}
		}

		return Object.values(map)
	})
</script>

<style lang="less" scoped>
	.house-card {
		height: 130px;
		display: flex;
		cursor: pointer;
		border-radius: 2px;
		box-shadow: @box-shadow-base;
		transition: box-shadow 0.3s, border-color 0.3s;

		&:hover {
			box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
		}

		&.loading {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-image: url('@/assets/images/loading.gif');

			.house-card-status,
			.house-card-body {
				opacity: 0;
			}
		}

		.house-card-status {
			width: 24px;
			height: 100%;
			background: @success-color;
			border-radius: 2px 0px 0px 2px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.svg-icon {
				color: #fff;
				width: 20px;
				height: 20px;
			}
		}

		.house-card-body {
			flex: 1;
			height: 100%;
			padding: 10px;
			font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.house-card-body-title-box {
				display: flex;
				justify-content: space-between;

				.dirty {
					width: 20px;
					height: 20px;
					border: 1px solid #b9bfcb;
					border-radius: 50%;
					font-size: 12px;
					font-weight: 400;
					color: #b9bfcb;
					line-height: 18px;
					text-align: center;
					margin-left: 5px;
				}

				.owe {
					color: @error-color;
					border: 1px solid @error-color;
				}

				.to {
					color: @primary-color;
					border-color: @primary-color;
				}
			}

			.house-title-tag {
				color: #fff;
				padding: 0 7px;
				border-radius: 4px;
			}
		}
	}
</style>
